<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
import { getBargeShip, getFisherShip, deleteBargeShip, deleteFisherShip, addBargeShip, addFisherShip } from '../network/net.js'

onMounted(() => {
    getBargeShipDataIn()
})

const tableData = ref([])
const getBargeShipDataIn = () => {
    getBargeShip().then(res => {
        tableData.value = res.data.data
    })
}

const handleDelete = (row) => {
    deleteBargeShip(row.id).then(res => {
        if (res.data.code === 200) {
            ElMessage.success('删除成功')
            getBargeShipDataIn()
        } else {
            ElMessage.error('删除失败')
        }
    })
}

const form = reactive({
    name: '',
    northid: '',
    mmsi: ''
})

const addBargeShipIn = () => {
    // name必须有
    if(form.name==""){
        ElMessage.error('名称不可为空！')
        return
    }
    addBargeShip(form).then(res => {
        if (res.data.code === 200) {
            ElMessage.success('添加成功')
            getBargeShipDataIn()
        } else {
            ElMessage.error('添加失败')
        }
    })
}
</script>

<template>
    <div id="barge">
        <div id="list">
            <el-table :data="tableData" border height="100%">
                <!-- 索引 -->
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="name" label="船名" />
                <el-table-column prop="northid" label="北斗号" />
                <el-table-column prop="mmsi" label="mmsi" />
                <!-- 操作 -->
                <el-table-column label="操作" width="180">
                    <template #default="{ row }">
                        <el-popconfirm title="确定删除?" @confirm="handleDelete(row)">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="form">
            <el-form label-position="right" label-width="80px">
                <el-form-item label="船名">
                    <el-input v-model="form.name" placeholder="请输入船名"></el-input>
                </el-form-item>
                <el-form-item label="北斗号">
                    <el-input v-model="form.northid" placeholder="请输入北斗号"></el-input>
                </el-form-item>
                <el-form-item label="mmsi">
                    <el-input v-model="form.mmsi" placeholder="请输入mmsi"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addBargeShipIn">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style lang="less" scoped>
#barge {
    height: 100vh;
    width: 100%;
    padding: 10px;
    display: flex;
    box-sizing: border-box;

    #list {
        flex: 1;
        height: 100%;
        background-color: #fff;
        border-radius: 14px;
        overflow: hidden;
    }

    #form {
        margin-left: 10px;
        width: 600px;
        height: 100%;
        border-radius: 14px;
        // background-color: #c51414; 
        padding: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #2b56bb;
    }
}
</style>